<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>4.0 computed attribute</title>
    <script src="../static/vue.min.js"></script>
    <script src="../static/jquery.js"></script>
    <style>

    </style>
</head>
<body>
<div id="app">
    <!--计算属性-->
    <p>原始字符串{{message}}</p>
    <p>计算后反转字符串{{reverseMessage}}</p>
    <!--
    声明了一个计算属性 reversedMessage 。
    提供的函数将用作属性 vm.reversedMessage 的 getter 。
    vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。-->
    computed vs methods<br>
    <!--
    我们可以使用 methods 来替代 computed，效果上两个都是一样的，
    但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。
    而使用 methods ，在重新渲染的时候，函数总会重新调用执行。-->
    {{reversedMessage2()}}
    <hr>
    <!--为computed设置setter与getter-->
    {{site}}
    <button v-on:click="setSite">改变</button>

</div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message:"LFSenior No 1"
        },
        methods: {
            reversedMessage2: function () {
                return this.message.split('').reverse().join('');
            },
            setSite:function () {
                vm.site="新的参数传递";
            }
        },
        computed:{
            reverseMessage:function () {
                return this.message.split('').reverse().join('');
            },
            site:{
                get:function () {
                    return this.message;
                },
                set:function (newValue) {
                    this.message=newValue;
                }

            }
        }
    })
</script>
</body>
</html>